import { ReactNode } from "react";
import { Content } from "antd/lib/layout/layout";
import React from "react";



interface PageContentProps{
    getMessage : any,
}

class PageContent extends React.Component<PageContentProps> {
    state = {
        userName:"",
        userCommod:"",
        userInput:[
            {
              id:"0",
              inputName:"test",
              content:"test"}
          ],
        msg: "testing"  
    }
    handleForm = (e: any) => {
        const { name, value } = e.target
        this.setState({
            [name]: value
        })
    }
    publishCom = (e: any) => {
        const { userName, userCommod, userInput } = this.state
        const newUserInput = [
            {
                id: String(++userInput.length),
                inputName: userName,
                content: userCommod
            },
            ...userInput]


        const last = newUserInput.filter(items => (items != undefined))
        this.setState({
            userInput: last,
            userName: "",
            userCommod: ""
        });
    }
    getChilidMsg = (data: object) => {
        console.log("接收来子的data", data)
    }
    handleChlid = () =>{
        this.props.getMessage(this.state.msg);
    }
    render() {
        return (
            <Content>
                <div>
                    <div>
                        <input type="text" name="userName" placeholder='人名' onChange={this.handleForm} value={this.state.userName} />
                        <textarea name="userCommod" placeholder='内容' onChange={this.handleForm} value={this.state.userCommod}></textarea>
                        <button onClick={this.publishCom}>发表</button>
                    </div>
                    <div>

                        {this.state.userInput.length === 0 ? (
                            <div>Nothing </div>
                        ) : this.state.userInput.map(item => (
                            <div key={item.id}>
                                <div>{item.inputName}</div>
                                <div>{item.content}</div>
                            </div>
                        ))
                        }

                    </div>
                    <button onClick={this.handleChlid}> 处理事件</button>
                </div>
            </Content>
        )
    }
}

export default PageContent;